<template>
	<view class="container">
		<button type="default" class="share" open-type="share"></button>
		<view class="invite_1">
			<image mode="widthFix" src="https://www.innovationgloble.com/wxs/img/wx/invite_1.png"></image>
		</view>
		<view class="invite-title">
			<span class="invite-title-l">邀请好友成功注册 </span>
			<span class="invite-title-r">领{{inviteNum}}积分</span>
		</view>
		<view class="invite_2">
			<image :class="isShort?'imageShort':'imageAuto'" @load="resetSize()" mode="aspectFit" src="https://www.innovationgloble.com/wxs/img/wx/invite_2.png"></image>
		</view>
		<view class="invite-box">
			<view class="inner-box">
				<image class="title-img" src="https://www.innovationgloble.com/wxs/img/wx/invite-title.png" mode="aspectFit" />
				<scroll-view v-if="inviteData.length!=0" scroll-y="true" class="scroll-Y">
					<InviteItem v-for="(item,index) in inviteData" :key="index" :inviteNum="inviteNum" :inviteData="item" v-if="inviteData.length!==0" />
				</scroll-view>
				<view>

				</view>
				<view v-if="inviteData.length===0" class="invite-no-data">
					<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/icon/wuyaoqing.png"></image>
					<view class="no-data-text">暂无邀请记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import InviteItem from '@/components/page-componnet/invite-item.vue'
	import {
		programName
	} from '@/common/config'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			InviteItem
		},
		data() {
			return {
				inviteData: [],
				shareNum: '',
				inviteNum: '',
				isShort: true
			}
		},
		computed: {
			...mapState('userStore', ['hasLogin'])
		},
		onLoad() {
			
		},
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pagesA/login/login'
				});
				return false;
			}
			this.loadInviteHis();
			this.getInviteCode();
			this.getInviteNum();
		},
		onShareAppMessage(res) {

			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			const userInfo = uni.getStorageSync('userInfo');
			const userName = userInfo.loginName || (userInfo.phoneNumber.substring(0, 3) + "****" + userInfo.phoneNumber.substring(
				7, userInfo.phoneNumber.length));
			const userId = userInfo.userId || '';
			let shareNum = this.shareNum;
			shareNum = shareNum.replace(/\=/ig, "%3D");
			return {
				title: `快来和我一起加入${programName}成果转化联盟吧！`,
				path: `/pagesA/accept-invite/accept-invite?name=${userName}&id=${userId}&shareNum=${shareNum}&inviteNum=${this.inviteNum}`,
				imageUrl: 'https://www.innovationgloble.com/wxs/img/wx/accept-lhkc.jpg'
			}
		},
		methods: {
			resetSize() {
				setInterval(() => {
					if (this.isShort)
						this.isShort = false;
					else
						this.isShort = true;
				}, 500)
			},
			//獲取邀请积分数量
			getInviteNum() {
				this.$request.get({
					url: 'UserIntegralHistory/selectMyShareIntegral'
				}).then(res => {
					console.log('邀请积分数量', res)
					this.inviteNum = res;
				})
			},
			//获取邀请码
			getInviteCode() {
				this.$request.get({
					url: 'user/getShareUrl'
				}).then(res => {
					console.log('邀请码', res)
					this.shareNum = res;
				})
			},
			//加载邀请记录
			loadInviteHis() {
				this.$request.get({
					url: 'UserIntegralHistory/getShareUserList'
				}).then(res => {
					console.log('邀请记录', res)
					this.inviteData = res;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40upx;
		box-sizing: border-box;

		.invite_1 {
			text-align: center;
			padding-top: 50upx;

			image {
				width: 650upx;
				margin: 0 auto;
			}
		}

		.invite_2 {
			text-align: center;
			margin-top: -180upx;

			.imageAuto {
				width: 400upx;
				margin: 0 auto;
			}

			.imageShort {
				width: 384upx;
				margin: 0 auto;
			}
		}

		.invite-title {
			text-align: center;
			margin-top: 40upx;

			.invite-title-l {
				font-size: 38upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(56, 137, 199, 1);
				line-height: 46upx;
				display: inline-block;
				margin-right: 10upx;
			}

			.invite-title-r {
				font-size: 38upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(230, 112, 0, 1);
				line-height: 46upx;
			}
		}

		.scroll-Y {
			height: 400upx;
		}

		.invite-no-data {
			background-color: #fff;
			text-align: center;
			margin-top: 90upx;

			image {
				width: 210upx;
				height: 197upx;
				margin: 0 auto;
			}

			.no-data-text {
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(72, 107, 157, 1);
				line-height: 30upx;
				text-align: center;
				padding-bottom: 116upx;
				margin-top: 14upx;
			}
		}

		.container {
			width: 100%;
			min-height: 100vh;
			background: url('https://www.innovationgloble.com/wxs/img/wx/invite_bg.png') no-repeat center;
			background-size: cover;
			position: relative;

			.share {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 50vh;
				width: 750upx;
				background-color: #00000000;

				&::after {
					border: none;
				}
			}
		}

		.invite-box {
			width: calc(100% - 40upx);
			padding: 20upx;
			box-sizing: border-box;
			position: absolute;
			bottom: 20upx;
			margin: 0 20upx;
			background: rgba(216, 237, 255, 1);
			box-shadow: 0upx 2upx 14upx 0upx rgba(48, 128, 231, 1);
			border-radius: 8upx;

			.inner-box {
				background-color: #FFFFFF;
				flex-direction: column;
				align-items: center;

				.title-img {
					width: 100%;
					height: 30upx;
					margin: 38upx auto;
				}
			}
		}
	}
</style>
